<template>
  <el-row>
    <el-col :span="12">
      <el-card style="height:485px" />
    </el-col>
    <el-col :span="12">
      <el-card style="height:485px">
        <div slot="header" class="clearfix">
          <span>运输任务</span>
          <i style="float: right; padding: 3px 0">查看更多<i style="margin-left:8px" class="el-icon-arrow-right" /></i>
        </div>
        <div class="task-table">
          <el-table
            key="index"
            :data="transportTaskList"
            style="width: 100%"
            border
            stripe
            :header-cell-style="{
              background:'#f9fafe'}"
          >
            <el-table-column prop="id" label="任务编号" />
            <el-table-column prop="startAgency" label="起始地" />
            <el-table-column prop="endAgency" label="目的地" />
            <el-table-column prop="licensePlate" label="车辆" />
            <el-table-column prop="status" label="任务状态" />
          </el-table>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
  props: {
    transportTaskList: {
      type: Array,
      default: () => []
    }
  }

}
</script>

<style lang="scss" scoped>
.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 2s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
}
.list-leave-active {
  position: absolute;
}
</style>
